<template>
  <div style="padding: 10px;">
    <div class="headerBoxList">
      <svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M42.4307 12.0391C37.702 7.38257 31.1539 4.5 23.9184 4.5C16.7254 4.5 10.2118 7.34876 5.48975 11.9571"
          stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M6.6665 29.4745V29.4168C6.6665 19.8439 14.4269 12.0835 23.9998 12.0835" stroke="#333" stroke-width="4"
          stroke-linecap="round" stroke-linejoin="round" />
        <path d="M31.1694 13.6309C37.1649 16.3582 41.3333 22.4006 41.3333 29.4166V29.4296" stroke="#333" stroke-width="4"
          stroke-linecap="round" stroke-linejoin="round" />
        <path
          d="M14.25 36.9998V29.4165C14.25 24.0317 18.6152 19.6665 24 19.6665C29.3848 19.6665 33.75 24.0317 33.75 29.4165V36.9998"
          stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
        <path
          d="M17.5259 43.5C19.4888 43.0154 20.7498 40.9456 20.7498 39.196C20.7498 37.3354 20.7498 34.4367 20.7498 30.5C20.7498 28.7051 22.2049 27.25 23.9998 27.25C25.7947 27.25 27.2498 28.7051 27.2498 30.5V39.196"
          stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
      </svg>
      <span style="margin-left: 10px">生物指纹个数 <span style="font-size: 15px;" v-if="total !== 0">({{ total }}个)</span></span>
    </div>
    <div class="content">
      <div class="itemBox" style="border-bottom: 1px solid #ebebeb;border-bottom: 1px solid #ccc;padding-left:30px;"
        v-for="(item, index) in list" :key="index">
        <div> 成功次数: {{ item.accept }}</div>
        <div> acceptCrypto: {{ item.acceptCrypto }}</div>
        <div> 获取次数: {{ item.acquire }}</div>
        <div> 拥有指纹数量: {{ item.count }}</div>
        <div> 对应用户id: {{ item.id }}</div>
        <div> 锁定次数: {{ item.lockout }}</div>
        <div> 永久锁定次数: {{ item.permanentLockout }}</div>
        <div> 失败次数: {{ item.reject }}</div>
        <div> rejectCrypto: {{ item.rejectCrypto }}</div>
        <div> 用户名: {{ item.username }}</div>
      </div>
    </div>
  </div>
</template>
  
  <script>
  // import { getRxTmpPathApi,getBiofingerprint,getPhoneInFoApi } from '@/api/phoneInfo/index'
  export default {  
      name:'Biofingerprint',
      props:['sendData'],
      data(){
          return{
              list:[],
              total:0
          }
      },
      mounted(){
      },
      watch:{
      '$store.state.account.basePhone':function(){
          this.init();
        }
      },
      created(){
        this.init();
      },
      methods:{
      init(){
        if(this.sendData.subtype == 'content'){
            this.list = JSON.parse(this.sendData.content);
            this.total = this.list.length;
        }

        
// let node = this.$route.params.nodeData.data;
//       let dataJson = {
//         "proof_num":node.proof_num,
//         "TYPE":'users',
//         "FIELD":"fingerprint"
//       }
//       getPhoneInFoApi(dataJson,'/phone/phone').then(res=>{
//         const str = res.data;
//         // let arr = str.split("\n");
//           this.list = str;
//           this.total = str.length;
//       })        

      }


      // let node = this.$route.params.nodeData.data;
      //       let dataJson = {
      //         "proof_num":node.proof_num,
      //         "TYPE":'users',
      //         "FIELD":"fingerprint"
      //       }
      //       getPhoneInFoApi(dataJson,'/phone/phone').then(res=>{
      //         const str = res.data;
      //         // let arr = str.split("\n");
      //           this.list = str;
      //           this.total = str.length;
      //       })        

    // }

  }

}
</script>
  
<style scoped>
.itemBox {
  width: 380px;
  min-height: 200px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-top: 10px;
  float: left;
  margin-left: 20px;
  background-image: url('../../../../assets/menuListLogo/zhiwenzhiwen.png');
  background-repeat: no-repeat;
  background-size: 100px 100px;
  background-position: top right;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 10px 0;
  /* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); */
}

.headerBoxList {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #d2d2d2;
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
}

.content {
  height: 86vh;
  overflow-y: auto;
  /* padding-left:30px; */
  margin-top: 20px;
  overflow-x: hidden;
  overflow-wrap: break-word
}

@media screen and (min-width: 2360px) {
  .content {
    height: 80vh;
    overflow-y: auto;
    overflow-x: hidden;
    overflow-wrap: break-word
  }
}

@media screen and (min-width: 2561px) {
  .content {
    height: 65vh;
    overflow-y: auto;
    overflow-x: hidden;
    overflow-wrap: break-word
  }
}</style>